<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 这是View  现在就是templet模板-->
    <!-- 这里是根组件的templet模板 -->
    <div id="app"> 

        <input type="text" ref='input_ref'>
        <button @click='click_a'>点这</button>
        <bbar ref='bbar_ref'></bbar>

    </div>


    <script>
        Vue.component
        (   
            'bbar',
            {
                template: `
                        <div>
                            【root的child组件：bbar组件】
                        </div>`,
                data(){
                    return {bbar_name:'我叫bbar'}
                },
                methods: 
                {
                    f(data){
                        console.log('这是bbar的方法',data);
                    }
                    
                },
            }
        )
        
        var vm = new Vue // 这里new实例后，就自动创建root组件（根组件）
        (
            {
                el: '#app',
                data:
                {
                   
                } ,
                methods: 
                {
                    click_a(){
                        console.log(this.$refs.input_ref.value);
                        console.log(this.$refs.bbar_ref.bbar_name);
                        this.$refs.bbar_ref.f('');
                        this.$refs.bbar_ref.f('父传子消息');
                        // ref放标签上，拿到原生节点
                        // ref放组件上，拿到组件对象
                    }  
                },
            }
        )
        // 举例说明子传父的应用
    </script>
</body>
</html>